<template>
    <div class="Discussion_Card">
        <div class="title">
            <div class="title-left">
                讨论区
            </div>
            <el-popover
            placement="bottom"
            width="100"
            trigger="click"
            content="回复栏在下面哦">
            <div class="title-right" slot="reference">
                +添加新回复
            </div>
            </el-popover>
            
            <div ref="box"></div>
        </div>
        <div class="community" v-for="item in message" :key="item.id"> 
            <div class="top">
                <img src="@/assets/Discussion_Card1.jpg">
                <!-- <img :src="item.imgSrc"> -->
                <router-link
                class="text" 
                :to="{path:'/Attention',query:{address:item.address}}"
                tag="div"
                >
                {{item.author}}
                </router-link>
            </div>
            <div class="middle">
                {{item.content}}
            </div>
            <div class="bottom">
                <div class="bottom-text">
                    {{item.releaseDate}}
                </div>
                <div class="bottom-img">
                    <img src="@/assets/Discussion_Card3.jpg">
                    
                </div>
                <div class="text">
                        回复
                    </div>
            </div>
        </div>
        <div class="pagination-box">
            <el-pagination
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :hide-on-single-page="reviewNum==1"
            :total="reviewNum*10">
            </el-pagination>
        </div>
       <div class="reply-box">
           <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            :rows="6"
            maxlength="100"
            show-word-limit
            >
            </el-input>
            <el-button type="primary" >
                评论
            </el-button>
            
       </div>
        
    </div>
</template>
<script>
import { createHash, constants } from 'crypto';
export default {
    name: 'Discussion_Card',
    data(){
        return{
            textarea:'',
            reviewNum : 2,
            message: [
                // 通过文章的id请求后台对应的讨论区数据
                {
                    id: 1,
                    author: '书记的毒桃子1',
                    idcard: 1,
                    content: '我是书记精选包装的毒桃子',
                    releaseDate: '发布于6天前',
                    imgSrc: '',
                },
                {
                    id: 2,
                    author: '书记的毒桃子2',
                    idcard: 1,
                    content: '我是书记精选包装的毒桃子',
                    releaseDate: '发布于6天前',
                    imgSrc: '',
                },
                {
                    id: 3,
                    author: '书记的毒桃子3',
                    idcard: 1,
                    content: '我是书记精选包装的毒桃子',
                    releaseDate: '发布于6天前',
                    imgSrc: '',
                }
            ],
        }
    },
    created(){
        this.handleCurrentChange(1)
    },
    methods:{
        handleCurrentChange(value){
            
        },
        handleClick1(){
            console.log(window)
            document.body.scrollTop = window.innerHeight
        }
    }
}
</script>
<style scoped>
@media screen and (min-width: 981px){
.title{
    float: left;
    width:100%;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    border-left: 5px solid #4e81ce;
    border-bottom: 1px solid #e6e6e6;
}
.title .title-left{
    float: left;
    width:30%;
    padding-left: 20px;
    
}
.title .title-right{
    float: right;
    color: rgb(143, 143, 216);
    font-size: 16px;
    cursor: pointer;
}
.community{
    float: left;
    width:100%;
    height:auto;
    border-bottom: 1px solid #e6e6e6;
}
.community .top{
    float: left;
    width:100%;
    height: 62px;
}
.community .top img{
    float: left;
    width: 6%;
    height: 62px;
}
.community .top .text{
    float: left;
    width: 94%;
    padding-left: 3%;
    font-size: 17px;
    line-height: 62px;
    cursor: pointer;
}
.community .middle{
    width:100%;
    height: auto;
    padding:30px 0 30px 8%;
    display: inline-block;
    font-size: 15px;
}
.community .bottom{
    float: left;
    width:100%;
    height: 40px;
}
.community .bottom .bottom-text{
    float: left;
    width:30%;
    margin-left:8%; 
    font-size: 14px;
    color: #6b6565;
}
.community .bottom .bottom-img{
    float: left;
    margin-left: 5%;
    width:50px;
    height: 14px;
    }  
.pagination-box{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 0px 60px;
}
.reply-box{
    width: 80%;
    margin: 10px auto 100px;
}
.reply-box .el-button{
    float: right;
}
}
@media screen and (max-width: 980px){
.title{
    float: left;
    width:100%;
    height: 40px;
    font-size: 20px;
    font-family: 'KaiTi';
    line-height: 40px;
    border-left: 5px solid #4e81ce;
    border-bottom: 1px solid #e6e6e6;
    background: white;
}
.title .title-left{
    float: left;
    width:30%;
    padding-left: 20px;
    
}
.title .title-right{
    float: right;
    color: blue;
}
.community{
    float: left;
    width:100%;
    height:auto;
    border-bottom: 1px solid #e6e6e6;
    background: white;
}
.community .top{
    float: left;
    width:100%;
    height: 50px;
}
.community .top img{
    float: left;
    width: 6%;
    height: 50px;
}
.community .top .text{
    float: left;
    width: 94%;
    padding-left: 3%;
    font-size: 17px;
    line-height: 50px;
    font-family: 'KaiTi'; 
    cursor: pointer;
}
.community .middle{
    width:100%;
    height: auto;
    padding:30px 0 30px 8%;
    display: inline-block;
    font-size: 15px;
}
.community .bottom{
    float: left;
    width:100%;
    height: 40px;
}
.community .bottom .bottom-text{
    float: left;
    width:30%;
    margin-left:8%; 
    font-size: 14px;
    color: #6b6565;
}
.community .bottom .bottom-img{
    float: left;
    margin-left: 5%;
    padding-top:3px;
    width:20px;
    height: 16px;
}
.community .bottom .bottom-img img{
    width:20px;
    height: 16px;
}
.community .bottom .text{
    float: left;
    font-size: 14px;
    color: #6b6565;
    padding-left:5px;
}
.pagination-box{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 0px 60px;
}
.reply-box{
    width: 80%;
    margin: 10px auto 0px;
    padding-bottom: 50px;
    text-align: center;
}
.reply-box .el-button{
    width: 50%;

}
}
</style>
